<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div class="box">
			<!-- 传递数据的时候，如果没有 v-bind 进行绑定，一律为字符型 -->
			<!-- 特别是 number 和 boolean 两个类型传值经常会出现错误 -->
			<hello-world :num="10"></hello-world>
		</div>

		<script src="./scripts/vue.js"></script>
		<script>
			// 声明子组件
			Vue.component('hello-world', {
				// props: ['num'],
				// Vue 给 props 提供了一种校验写法，如果不满足特定的类型，就会报错
				props: {
					// num: Number,
					// 带有默认值的数字
					num: {
						type: Number,
						default: 3
					}
				},
				data: function () {
					return {
						name: 'Tom'
					}
				},
				template: `
          <div>
				    <p>{{ name }}</p>
				    <p>{{ num }}</p>
				  </div>
        `
			})

			var vm = new Vue({
				el: '.box',
				data: {
					age: 3,
					num: 10
				}
			})
		</script>
	</body>
</html>
